<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<!-- <tuicalling
		ref="TUICalling"
		id="TUICalling-component"
		:config="config">
	</tuicalling> -->
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<!-- 先查 remark；无 remark 查 (c2c)nick/(group)name；最后查 (c2c)userID/(group)groupID -->
		<!-- <view class="tui-chatroom-navigatorbar">
			<image class="tui-chatroom-navigatorbar-back" src="/static/static/assets/ic_back_white.svg" @tap="goBack" />
			
			<view class="conversation-title">{{ conversationName }}</view>
		</view> -->
		<!-- #endif -->

		<view class="group-profile"><TUI-group-profile v-if="isShow" id="groip-profile" :conversation="conversation" />
		</view>
		<view class="message-list" @tap="triggerClose"><TUI-message-list id="message-list" ref="messageList"
				:conversation="conversation" /></view>
		<view v-if="videoPlay" class="container-box" @tap.stop="stopVideoHander">
			<video v-if="videoPlay" class="video-message" :src="videoMessage.payload.videoUrl"
				:poster="videoMessage.payload.thumbUrl" object-fit="cover" error="videoError" autoplay="true"
				direction="0" />
		</view>
		<view v-if="showChat" class="message-input"><TUI-message-input id="message-input" ref="messageInput"
				:displayOrderList="tenadter" :idstr='tenadID' :conversation="conversation" @sendMessage="sendMessage" />
		</view>
	</view>
</template>

<script>
	import TUIMessageList from '@/plug/components/tui-chat/message-list/index';
	import TUIMessageInput from '@/plug/components/tui-chat/message-input/index';
	import TUIGroupProfile from '@/plug/components/tui-group/group-profile/index';

	const app = getApp();
	export default {
		components: {
			TUIMessageList,
			TUIMessageInput,
			TUIGroupProfile
		},
		props: {},
		data() {
			return {
				conversationName: '',
				conversation: {},
				messageList: [],
				isShow: false,
				showChat: true,
				conversationID: '',
				videoPlay: false,
				tenadter: false,
				tenadID: '0',
				videoMessage: {},
				config: {
					sdkAppID: '',
					userID: '',
					userSig: '',
					type: 1,
					tim: null
				}
			};
		},
		created() {
			uni.$on('videoPlayerHandler', value => {
				this.videoPlay = value.isPlay;
				this.videoMessage = value.message;
			});
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// conversationID: C2C、 GROUP
			const {
				conversationID
			} = options;
			let shop = JSON.parse(options.url)


			// this.$util.request({
			// 	url:'/plug/index.php?act=index&index=getIMUserSig&goods_id='+shop.goodis,
			// 	method:'get',
			// 	data:{}
			// }).then(res=>{
			// 	console.log(res);
			// 	let goods={
			//           goods_id: res.datas.goods_info.goods_id,
			//           goods_name: res.datas.goods_info.goods_name,
			//           goods_price: res.datas.goods_info.goods_price,
			//           goods_image: res.datas.goods_info.goods_image,
			//           goods_sales: '',
			//           user_symbol: "￥",
			//         }
			// })
			this.conversationID = conversationID;
			// #ifdef MP-WEIXIN
			// this.config = {
			// 	sdkAppID: app.globalData.SDKAppID,
			// 	userID: app.globalData.userInfo.userID,
			// 	userSig: app.globalData.userInfo.userSig
			// }
			// // 挂载在 uni 上
			// uni.$wxTUICalling = this.$refs.TUICalling;
			// 		this.$nextTick(() => {
			// 			uni.$wxTUICalling.init()
			// })
			// #endif
			uni.showLoading();
		},
		onShow() {
			const conversationID = this.conversationID;
			//等待SDK加载完毕 再请求获取历史消息
			setTimeout(() => {
				uni.hideLoading();
				//uni.$on('isSDKReady', value => {
				uni.$TUIKit.setMessageRead({
					conversationID
				}).then(() => {
					console.log('TUI-chat | setMessageRead  | ok');
				});
				uni.$TUIKit.getConversationProfile(conversationID).then(res => {
					const {
						conversation
					} = res.data;
					this.conversation = conversation;
					this.conversationName = this.getConversationName(conversation);
					console.log(this.conversationName);
					if (this.conversationName) {
						uni.setNavigationBarTitle({
							title: this.conversationName
						});
					}
					this.isShow = conversation.type === 'GROUP';
				});

				//});
			}, 1000);
		},
		mounted() {},
		onUnload() {
			//// #ifdef MP-WEIXIN
			//   this.$refs.TUICalling.destroyed();
			// // #endif
		},
		methods: {
			stopVideoHander() {
				this.videoPlay = false;
			},
			getConversationName(conversation) {
				if (conversation.type === '@TIM#SYSTEM') {
					this.showChat = false;
					return '系统通知';
				}

				if (conversation.type === 'C2C') {
					return conversation.remark || conversation.userProfile.nick || conversation.userProfile.userID;
				}

				if (conversation.type === 'GROUP') {
					return conversation.groupProfile.name || conversation.groupProfile.groupID;
				}
			},
			editall(e) {
				this.tenadID = e
				this.tenadter = true
			},
			sendMessage(event) {
				// 将自己发送的消息写进消息列表里面
				this.$refs.messageList.updateMessageList(event.detail.message);
			},

			triggerClose() {
				if (this.showChat) {
					this.$refs.messageInput.handleClose();
				}
			},

			goBack() {
				const pages = getCurrentPages(); // 当前页面栈

				if (
					pages[pages.length - 2].route === 'pages/TUI-Conversation/create-conversation/create' ||
					pages[pages.length - 2].route === 'pages/TUI-Group/create-group/create' ||
					pages[pages.length - 2].route === 'pages/TUI-Group/join-group/join'
				) {
					uni.navigateBack({
						delta: 2
					});
				} else {
					uni.navigateBack({
						delta: 1
					});
				}

				uni.$TUIKit
					.setMessageRead({
						conversationID: this.conversationID
					})
					.then(() => {});
			}
		}
	};
</script>
<style>
	@import './chat.css';

	page {
		background: #EEEEEE;
	}
</style>